<template>
    <div id="food">
      <div class="content">
        <el-card>
          <div class="title"><h2>地方美食</h2></div>
          <div class="list">
              <Item :item="item" v-for="item in data" :key="item"/>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import Item from "@/components/Item.vue";
  import { ref, reactive } from "vue";
  
  const data = reactive([
    {
      id: 1,
      img: require("@/assets/img/food/food01.jpg"),
      title: "东坡肉",
      price: 120,
    },
    {
      id: 2,
      img: require("@/assets/img/food/food02.jpg"),
      title: "美味中餐",
      price: 100,
    },
    {
      id: 3,
      img: require("@/assets/img/food/food03.jpg"),
      title: "宫保鸡丁",
      price: 60,
    },
    {
      id: 4,
      img: require("@/assets/img/food/food04.jpg"),
      title: "茄汁大虾",
      price: 130,
    }
  ]);
  </script>
  
  <style lang="scss" scoped>
  #food {
    margin-top: 30px;
    ::v-deep .el-card {
      width: 100%;
    }
    .title {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #e3e3e3;
      margin-bottom: 20px;
    }
    .list{
      display: flex;
      justify-content: space-between;
    }
  }
  </style>
  